<template>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页 </el-breadcrumb-item>>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>出货检验</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->

    <!--  搜索栏开始 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryOqc" class="demo-form-inline">
        <el-form-item label="检验单编号">
            <el-input v-model="queryOqc.defectName" placeholder="请输入检验单编号" clearable />
        </el-form-item>

        <el-form-item label="客户名称">
            <el-input v-model="queryOqc.defectName" placeholder="请输入客户名称" clearable />
        </el-form-item>


        <el-form-item label="批次号">
            <el-input v-model="queryOqc.defectName" placeholder="请输入批次号" clearable />
        </el-form-item>

        <el-form-item label="产品物料编码">
            <el-input v-model="queryOqc.defectName" placeholder="请输入产品物料编码" clearable />
        </el-form-item>

        <el-form-item label="产品物料名称">
            <el-input v-model="queryOqc.defectName" placeholder="请输入产品物料名称" clearable />
        </el-form-item>

        <el-form-item label="检测结果">
            <el-select v-model="queryOqc.defectType" placeholder="请选择检测结果">
                <el-option label="检测通过" value="检测通过" />
                <el-option label="检测不通过" value="检测不通过" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadoqc">搜索</el-button>
            <el-button @click="resettingoqc">重置</el-button>

        </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->

    <!-- 工具栏开始 -->
    <div class="flex">
        <el-button title="新增" @click="this.addOqcDialogVisible = true" type="primary"><el-icon>
                <Plus />
            </el-icon>新增</el-button>
        <el-button color="#b3e19d" @click="handlerEditOqc" title="修改" type="primary"><el-icon>
                <EditPen />
            </el-icon>修改</el-button>

        <el-button color="#f89898" @click="handlerDeleteOqc" title="删除" type="primary"><el-icon>
                <Delete />
            </el-icon>删除</el-button>
    </div>
    <!-- 工具栏结束 -->
    <!-- 表格 开始 -->
    <el-table ref="iqcTable" :data="iqc" max-height="800px" :stripe="true" :border="true"
        style="width: 200%;margin-top: 10px;">
        <el-table-column type="selection" />

        <el-table-column width="150" align="center" label="出货检验单编号" property="oqcCode">

        </el-table-column>
        <el-table-column width="150" align="center" label="检单名称" property="oqcName" />
        <el-table-column width="150" align="center" label="客户名称" property="clientName" />
        <el-table-column width="150" align="center" label="批次号" property="batchCode" />
        <el-table-column width="150" align="center" label="产品编码" property="itemCode" />
        <el-table-column width="150" align="center" label="产品名称" property="itemName" />
        <el-table-column width="150" align="center" label="规格型号" property="specification" />
        <el-table-column width="150" align="center" label="单位" property="unitOfMeasure" />
        <el-table-column width="150" align="center" label="发货数量" property="quantityOut" />
        <el-table-column width="150" align="center" label="检测数量" property="quantityCheck" />
        <el-table-column width="150" align="center" label="不合格数" property="quantityUnqualified" />
        <el-table-column width="150" align="center" label="检测结果" property="checkResult" />
        <el-table-column width="150" align="center" label="出货日期" property="outDate" />
        <el-table-column width="150" align="center" label="检测日期" property="inspectDate" />
        <el-table-column width="150" align="center" label="检测人员" property="inspecor" />
        <el-table-column width="150" align="center" label="单据状态" property="status" />

        <el-table-column width="200" align="center" label="操作">
            <template #default="scope">
                <div v-if="scope.row.status == '草稿' || scope.row.status != '已完成'">
                    <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>

            </template>
        </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination style="margin-top: 15px;" :page-size="oqcLimit" :pager-count="oqcMaxPage" @current-change="changePage"
        background layout="prev, pager, next" :total="oqcTotal" />
    <!-- 分页栏结束 -->
</template>

<script>
import oqcRequst from '../../../api/oqc-api.js';

export default {
    data() {
        return {
            queryOqc: {},//搜索信息
            addOqcDialogVisible: false,//增加弹窗窗口
            iqc: [],//表格

            oqcCurrPage: 1, // 分页的当前页码
            oqcLimit: 10, //  分页的每页大小
            oqcTotal: 0, //  列表的总条数
            oqcMaxPage: 1,//  列表的最大页码


        }
    }, methods: {

        //缺陷列表的翻页函数
        changePage(value) {
            this.oqcCurrPage = value;
            this.loadoqc();
        },

        // 加载缺陷数据
        loadoqc() {

            oqcRequst.list(this.oqcCurrPage, this.oqcLimit,
                this.queryOqc, res => {
                    // 设置数据
                    this.iqc = res.data.list;
                    this.oqcTotal = res.data.total;
                    this.oqcMaxPage = res.data.pages;
                });

        },
        //重置操作
        resettingoqc() {
            // 将newUser制空
            this.queryOqc = {};
            this.loadoqc();

        },




    }, mounted() {
        this.loadoqc();

    }



}





</script>